<template>
    <div class="noticeDetails">
        <x-header :left-options="{showBack: true,backText:'公告详情'}" class="headerBox"></x-header>
        <div class='noticeTop '>
            <div class='noticeTitle'>{{noteTitle}}</div>
            <div class='time'>2018年1月12日 14:00</div>
            <div class='num'>阅读{{readNum}}<span>评论8{{commentNum}}</span></div>
            <div class='contTitle'>{{contTitle}}</div>
            <div class='noticeTxt' v-for="(noticeTxt, index) in noticeTxts" :key="index">{{noticeTxt.noticeTxt}}</div>
        </div>

        <!-- 回复模块 -->
        <div class='reply'>
            <div class='replyTitle'>最新回复</div>
            <div class="evaList" v-for="(reply, indexr) in replys" :key="indexr">
                <div class="evaList_left">
                    <img :src="reply.head" />
                </div>
                <div class="evaList_right">
                    <div class='evaList_right_top'>{{reply.name}}</div>
                    <div class='evaList_right_middle'>
                        {{reply.content}}
                    </div>
                    <div class='evaList_right_link'>
                        <div class="evaList_right_link_name">
                            {{reply.otherName}}
                        </div>
                        <div>等人</div>
                        <div class="evaList_right_link_num">
                            共{{reply.num}}条回复>
                        </div>
                    </div>
                    <div class="evaList_right_bottom">
                        <div class="evaList_right_bottom_left">
                            {{reply.time}}
                        </div>
                        <div class="evaList_right_bottom_right">
                            <img src="../assets/images/share10.png" />
                            <img src="../assets/images/Reply12x.png" />
                            <img src="../assets/images/live11.png" />
                            <div>{{reply.zanNum}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { XHeader  } from "vux";
    export default {
        components: {
            XHeader
        },
        data(){
            return{
                noteTitle: '有关xxxx的通知',
                readNum: '7512',
                commentNum: '7512',
                contTitle: '主题严肃，思想高尚，进取心较强',
                noticeTxts: [
                    {
                       noticeTxt: '（1）中心不够明确，立意不够清晰。'
                    },
                    {
                       noticeTxt: '（2）中心不够明确，立意不够清晰。'
                    },
                    {
                       noticeTxt: '（3）中心不够明确，立意不够清晰。'
                    },
                    {
                       noticeTxt: '（4）中心不够明确，立意不够清晰。'
                    }
                ],
                replys: [
                    {
                        head: require('../assets/images/playback05.png'),
                        name: '高慧雯',
                        content: '内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。',
                        otherName: '纵我七情六欲半晌愁',
                        num: '233',
                        tiem: '12-25 18:17',
                        zanNum: '3157'
                    },
                    {
                        head: require('../assets/images/playback05.png'),
                        name: '高慧雯',
                        content: '内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。',
                        otherName: '纵我七情六欲半晌愁',
                        num: '233',
                        tiem: '12-25 18:17',
                        zanNum: '3157'
                    }
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
.noticeDetails{
    /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
    //   公告样式
    .noticeTop {
        padding: 20px 30px;
        background: #fff;
        .noticeTitle {
            font-size: 32px;
            font-weight: 600;
            line-height:2;
        }
        .time{
            font-size:24px;
            color:#919191;
            line-height: 1.6;
        }
        .num{
            font-size: 24px;
            color: #3E8BF4;
            line-height: 1.6;
            span{
                margin-left: 20px;
            }
        }
        .contTitle{
            font-size:28px;
            text-indent:2em;
            margin-top: 15px;
        }
        .noticeTxt{
            font-size:28px;
            line-height: 1.6;
        }
    } 
    /* 回复 */
    .reply{
        background: #fff;
        padding: 30px;
        border-top: 20px solid #f8f9fa;
        .replyTitle{
            font-size: 34px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .evaList {
            display: flex;
            padding-top:20px;
            .evaList_left {
                margin-right: 20px;
                img {
                    width: 80px;
                    height: 80px;
                    margin-top: 20px;
                }
            }
            .evaList_right {
                width: 100%;
                font-size: 35px;
                border-bottom: 1px solid #eeeeee;
                .evaList_right_top{
                    color: #575757;
                }
                .evaList_right_middle {
                    margin: 10px 0;
                }
                .evaList_right_link {
                    margin: 10px 0;
                    background-color: #f7f7f7;
                    display: flex;
                    align-items: center;
                    padding: 10px 20px;
                    font-size: 30px;
                    .evaList_right_link_name {
                        max-width: 240px;
                        color: #5f7293;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .evaList_right_link_num {
                        color: #5f7293;
                        margin-left: 20px;
                    }
                }
                .evaList_right_bottom {
                    margin: 20px 0;
                    color: #a7a7a7;
                    font-size: 24px;
                    display: flex;
                    justify-content: center;
                    /* align-items: center; */
                    .evaList_right_bottom_right {
                        margin-left: auto;
                        display: flex;
                        align-items: center;
                        img {
                            width: 30px;
                            height: 28px;
                            margin: 0px 20px;
                        }
                        div {
                            display: inline-block;
                            font-size: 32px;
                        }
                    }
                }
            }
            
        }
    } 
}
</style>